<template lang="">
	<div>
		<div>
			<div class="centerdata">
				<div style="width: 1200px;margin-top: 10px;display: flex;">
					<div style="width: 300px; height: 1000px;">
						<div class="user-tip">{{userInfo.username}}</div>
						<div style="background-color: #fff;padding:20px 10px;">
							<div 
								class="left-item" 
								v-for="(item,index) in itemList"
								:key="index"
								@click="routeTo(item.link)">
								<div>
									<i :class="item.icon" style="color: #b5060d;"></i>
									<span>{{item.name}}</span>
								</div>
								<i class=" el-icon-arrow-right"></i>
							</div>
						</div>
						
						<div>
							<div class="block-item">
								<i style="margin: 0 10px;" class="el-icon-bell"></i>本周开庭信息
							</div>
							<div style="height: 200px;background-color: #fff;">
								<info-columns ref="tableRef"/>
							</div>
						</div>
					</div>
					<div style="width: 870px; height: 1000px;margin-left: 10px; ">
						<el-card
							class="box-card" 
							shadow="never" 
							ref="info">
							<div class="media" v-if="userInfo">
							  <div
								v-photo="userInfo"
								v-lazy:background-image="$options.filters.filterUserLazyImg(userInfo.thumb_img)"
								:key="userInfo.thumb_img"
								class="div-photo person-head-img"/>
							  <div class="media-body">
								<h5 style="color: #b5060d !important;margin-bottom: 1rem;font-weight: bold;">{{userInfo.username}}，{{ noontip }}</h5>
								<p style="font-size: 14px;">
										您上一次登录时间为：{{userInfo.login_time | filterTimestampToFormatTime('YYYY-MM-DD HH:mm')}},
										登录登录IP为:{{userInfo.login_ip ?userInfo.login_ip: '192.168.0.1'}}
									</p>
									<p style="font-size: 14px;">如非您本人操作，请及时更改密码！</p>
							  </div>
							</div>
						</el-card>
						<top-data
							:counts="counts"
							:topdataLoading="topdataLoading"/>

						<div style="background-color: #fff;margin-top: 10px;     ">
							<el-card
								class="box-card" 
								shadow="never" 
								style="height: 570px;">
							  <div 
									slot="header" 
									class="clearfix">
								<span>收费统计</span>
								<el-button 
									style="float: right; padding: 3px 0" 
									type="text"></el-button>
							  </div>
							  <div 
									ref="myChart" 
									style="width: 100%;height: 500px;"></div>
							</el-card>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import InfoColumns from './components/info-columns.vue'// 详情组件
	import TopData from './components/top-data.vue'
	import Lockr from 'lockr'
	import {
		getWeekFinance,
		getTopData
	} from '@/api/index/index'
	export default {
		name: "app",
		components: {
			InfoColumns,
			TopData
		},
		data() {
			return {
				itemList:[
					{"name":"我的客户","icon":"el-icon-user-solid","link":"/customer"},
					{"name":"我的案件","icon":"el-icon-folder-opened","link":"/lawcase"},
					{"name":"我的合同","icon":"el-icon-document-copy","link":"/contract"}
				],
				textarea:"",
				userInfo:Lockr.get('loginUserInfo'),
				// top数据
				topdataLoading:false,
				counts:{},
			}
		},
		// 页面初始化挂载dom
		mounted() {
			// 收费统计
			this.getFinanceDatas()
			// 获取顶部数据
			this.getTopData()
		},
		created() {
			this.mynoontip()
		},
		methods: {
			routeTo(link) {
				this.$router.push(link)
			},
			
			// 问候语
			mynoontip() {
				const that = this
				const date = new Date()
				if (date.getHours() >= 0 && date.getHours() < 12) {
					that.noontip = '上午好'
				} else if (date.getHours() >= 12 && date.getHours() < 18) {
					that.noontip = '下午好'
				} else {
					that.noontip = '晚上好'
				}
			},
			
			// 收费统计
			getFinanceDatas(){
				this.tubiaoLoading = true
				getWeekFinance().then(res => {
					if(res.data){
						// 画统计图
						this.drawLine(res.data)
						this.tubiaoLoading = false
					}
				}).catch(() => {
					this.tubiaoLoading = false
				})
			},
			
			// 数据图表
			drawLine(item){
				// 初始化echarts实例
				// 新建一个promise对象
				let newPromise = new Promise((resolve) => {
					resolve()
				})
				//然后异步执行echarts的初始化函数
				newPromise.then(() => {
					let myChart = this.$echarts.init(this.$refs['myChart'])
					let dataArr = []
					let financeArr = []
					item.map((items)=>{
						dataArr.push(items.date)
						financeArr.push(items.finance)
					})
					// console.log(dataArr);
					// 指定图表的配置项和数据
					let option = {
						title: {},
						tooltip : {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#6a7985'
								}
							}
						},
						legend: {
							data:['收费']
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis : [
							{
								type : 'category',
								boundaryGap : false,
								data : dataArr
							}
						],
						yAxis : [
							{
								type : 'value'
							}
						],
						series : [
							{
								name:'收费',
								type:'line',
								stack: '元',
								areaStyle: {},
								data:financeArr
							}
						]
					}
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				})
				
			},
			
			// 获取顶部数据
			getTopData(){
				this.topdataLoading = true
				getTopData().then(res => {
					if(res.data){
						this.counts = res.data
						this.topdataLoading = false
					}
				}).catch(() => {
					this.topdataLoading = false
				})
			},
			
		},
	};
</script>
<style scoped>
	.left-item {
		border-radius: 3px;
		border: 1px solid #f2f2f2;
		margin: 3px 5px;
		font-size: 16px;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		color: #8d8d8d;
		cursor: pointer;
	}
	.left-item span{
		margin-left: 10px;
	}

	.gongneng_box {
		margin-top: 15px;
		display: flex;
	}

	.shitu-box {
		margin-top: 20px;
		padding: 10px;
		background-color: #fff;
		width: 1200px;
	}

	.box {
		width: 1200px;
	}

	.nav {
		/* margin-top: 30px; */
		background-color: #fff;
		height: 55px;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.nav_item {
		color: #545454;
		font-weight: 600;
		/* padding: 0 40px; */
	}
	.centerdata{
		display: flex;
		background-color: #f2f2f2; 
		align-items: center;  
		min-height: 100vh;
		flex-direction: column;
	}
	.user-tip{
		height: 90px; 
		background-size: 100%;
		color: #fff;
		background-color:#b5060d ;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 20px;
		background: url('../../../assets/img/topbgm.png') no-repeat center center;
	}
	.block-item{
		height: 50px; 
		color: #fff;
		background-color:#b5060d ;
		display: flex;
		align-items: center;
		font-size: 15px; 
		margin-top: 10px;
	}
	.media {
	    display: flex;
	    align-items: flex-start;
	}
	.person-head-img {
	    display: block;
	    width: 55px;
	    height: 55px;
	    border-radius: 60px;
	    margin-right: 15px;
	    cursor: pointer;
	}
	.h5, h5 {
	    font-size: 1.25rem;
	}
	.photo-wrap {
	    position: absolute;
	    z-index: 1;
	    margin: 0;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	}
	.media-body p {
		line-height: 25px;
		margin:0
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>